<template>
  <div class="swiper-wrapper">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in bannerImages" :key="index">
        <img v-lazy="image.carousel_url" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        // images: []
        // images: [
        //   'http://127.0.0.1:8089/static/img/banner1.jpg',
        //   'http://127.0.0.1:8089/static/img/banner2.jpg',
        //   'http://127.0.0.1:8089/static/img/banner3.jpg',
        //   'http://127.0.0.1:8089/static/img/banner4.jpg'
        // ]
      }
    },
    methods: {
      ...mapMutations(['SET_BANNER_IMAGES']),
      async getBannerImage() {
        this.$api.homeData.banner().then(({
          data
        }) => {
          console.log(data)
          // this.images = data
          // this.$store.commit('SET_BANNER_IMAGES')
          this.SET_BANNER_IMAGES(data)
          console.log(this.bannerImages)
        })
      }
    },
    computed: {
      ...mapState(['bannerImages'])
    },
    mounted() {
      this.getBannerImage()
    }
  }
</script>

<style scoped>
  .swiper-wrapper img {
    width: 100%;
  }
</style>
